<template>
    <vue-context ref="ctxMenu" class="folder-context" :class="size">
        <slot></slot>
    </vue-context>
</template>

<script>
import VueContext from "vue-context";
import "vue-context/src/sass/vue-context.scss";
/** 文件夹右键菜单 */
export default {
    name: "ContextMenu",
    components: { VueContext },
    props: {
        size: {
            type: String,
            default: "medium",
        },
    },
    methods: {
        open(e) {
            return this.$refs.ctxMenu.open(e);
        },
        close(e) {
            return this.$refs.ctxMenu.close(e);
        },
    },
};
</script>

<style lang="scss" scoped>
.folder-context {
    padding: 8px;
    width: var(--width);
    .icon-panel {
        max-width: var(--width);
    }
    &.medium {
        --width: 220px;
    }
    ::v-deep .el-loading-mask {
        background-color: transparent;
    }
    ::v-deep .el-divider.el-divider--horizontal {
        border-top: 1px solid rgba(255, 255, 255, 0.0588);
        background-color: transparent;
        margin: 4px 0;
        height: 0;
    }
}
</style>
